<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div style="text-align: center" @click="triggerUpload">
            <div>
              <div class="user-info-head">
                <el-upload
                  ref="uploadRef"
                  :accept="accept"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :auto-upload="false"
                  v-show="false"
                  :on-change="handleChange"
                  :on-success="handleAvatarSuccess"
                />
                <img
                  v-if="avatar"
                  alt="头像"
                  :src="avatar"
                  style="width: 120px; height: 120px; border-radius: 50%"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </div>
            </div>
          </div>
          <div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                用户名称
                <div class="pull-right">{{ user.username }}</div>
              </li>
              <li class="list-group-item">
                手机号
                <div class="pull-right">{{ user.phone }}</div>
              </li>
              <li class="list-group-item">
                电子邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="基本资料" name="userbasics">
              <userBasics
                :user="user"
                ref="formBasics"
                @update-list="getUserMsg()"
              />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="userpassword">
              <resetPassword ref="formPassword" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup >
import { ref, onMounted } from 'vue'
import userBasics from './userBasics.vue'
import resetPassword from './resetPassword.vue'
import {
  getPersonalMsg,
  getProfileImage,
  profileImage
} from '@/api/indivdual/userinfo'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
const store = useStore()
const activeTab = ref('userbasics')
const uploadRef = ref()
const accept = ref('.jpg,.png,.jpeg')
const userId = store.state.app.user.id
// 个人中心查看个人信息
const user = ref({
  username: '',
  email: '',
  phone: '',
  introduce: ''
})
const formBasics = ref(null)
const formPassword = ref(null)
// 头像信息
const avatar = ref('')
onMounted(async () => {
  getUserMsg()
  getAvatar()
})

const getUserMsg = async () => {
  await getPersonalMsg(userId)
    .then((res) => {
      user.value = { ...res.data }
      user.value.username = res.data.username
      user.value.email = res.data.email
      user.value.sex = res.data.introduce.sex
      user.value.address = res.data.introduce.address
      user.value.birthday = res.data.introduce.birthday
      user.value.introduction = res.data.introduce.introduction
    })
    .catch((err) => {
      console.log(err)
    })
}
const getAvatar = async () => {
  await getProfileImage(userId).then((res) => {
    const r = 'data:image/png;base64,' + res.data
    avatar.value = r
    store.commit('userinfo/updateAvatar', avatar.value)
    localStorage.setItem('avatar', avatar.value)
  })
}
// 触发上传
const triggerUpload = () => {
  if (uploadRef.value) {
    uploadRef.value.$el.querySelector('input').click()
  }
}
// 自定义上传逻辑
const handleChange = async (file, fileList) => {
  const formData = new FormData()
  formData.append('file', file.raw)
  formData.append('user_id', userId)
  await profileImage(formData).then((res) => {
    if (res.success) {
      ElMessage.success(res.message)
      fileList.value = []
      getAvatar()
    } else {
      ElMessage.error('文件导入失败')
    }
  })
}
// 上传图片成功
const handleAvatarSuccess = (response, uploadFile) => {
  console.log(uploadFile)
}
// // 清空校验
const handleTabClick = () => {
  if (formPassword.value) {
    formPassword.value.resetFrom()
  }
}
</script>
<style scoped lang="scss">
.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group {
  padding-left: 0px;
  list-style: none;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0px;
  font-size: 13px;
}
.pull-right {
  float: right !important;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}
.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>
